<template>
	<article v-title="'宠物信息'">

		<div class="fdimg" v-if="fdimg" @click="fdimg = false">
			<img :src="info.tp" alt="">
		</div>
		<section class="banner" @click="fdimg = true">
			<img :src="info.tp" alt=""  >
		</section>

		<section class="pet-intro">
			<h5>宠物信息</h5>
			<div class="trait">
				<div class="list">
					<div class="list fl">
						品种：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.pz">
					</div>
					<div class="list fr" v-if = "info.isdel == 'Y' && info.bq == '1' ? true:false">
						<div class="img1" v-if="imgBol">
							<input type="file" class="file" @change="getImg">
							<p class="icon icon-shangchuan">&nbsp;&nbsp;&nbsp;更换图片</p>
						</div>
						<img v-else :src="imgUrl">
					</div>
				</div>
				<div class="list cf">
					<div :class="info.isdel == 'Y' && info.bq == '1' ? 'list fl':'list fr'">
						特征：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.tz">
					</div>
				</div>
				<div class="list cf">
					<div class=" list fl">
								类型：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.type">
					</div>
				</div>
			</div>
			<div class="lose cf">
				<div class="list fl">
					<!-- 区域：<span>{{info.addr}}</span> -->
					标题：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.title">
				</div>
				<div class="list fr">
					<!-- 区域：<span>{{info.addr}}</span> -->
					区域：<input type="text" style="width:1.05rem;" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.addr">
				</div>

			</div>
			<div class="lose cf">
				<div class="list fr">
					位置：<input type="text" style="width:1.05rem;" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.xxdz">
				</div>
				<div class="list fl">
					时间：<input type="text" name="" :disabled="true"  v-model="time">
				</div>
			</div>
			<div class="lose cf">
				<div class="list fl ">
					描述：
					<!-- <input type="text" style="width:1.05rem;" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.xxdz"> -->
					<textarea style="width:3rem;" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true" v-model="info.ms" maxlength="100"></textarea>
				</div>

			</div>
		</section>


		<section class="person-intro">
			<h5>个人信息</h5>
			<div class="trait">
				<!-- <div class="list"> 姓名：<span>{{info.xm}}</span></div>
				<div class="list"> 手机：<span>{{info.sjh}}</span></div>
				<div class="list"> 邮箱：<span>{{info.email}}</span></div>
				<div class="list"> 悬赏：<span>{{info.xsje}}</span></div> -->
				<div class="list"> 姓名：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.xm"></div>
				<div class="list"> 手机：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.sjh"></div>
				<div class="list"> 邮箱：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.email"></div>
				<div class="list"> 悬赏：<input type="text" name="" :disabled="info.isdel == 'Y' && info.bq == '1' ? false:true"  v-model="info.xsje"></div>
			</div>
		</section>

		<footer>
			<div :class="info.isdel == 'Y' ? 'ft-3':'ft-2'" v-if = "info.isdel == 'Y' ? false:true" @click="msgBol = true">留言</div>
			<div :class="info.isdel == 'Y' ? 'ft-3':'ft-2'" v-if = "info.isdel == 'Y' ? false:true" @click="contactsFn(info.sjh, info.wxzh)">联系他</div>

			<div :class="info.isdel == 'Y' ? 'ft-3':'ft-2'" v-if = "info.bq == '1'" @click="baocun">信息保存</div>
			<div :class="info.isdel == 'Y' ? 'ft-3':'ft-2'" v-if = "info.bq == '1'" @click="wancheng">寻找完成</div>
			<div :class="info.isdel == 'Y' ? 'ft-3':'ft-2'" v-if = "info.bq == '1'" @click="del">寻找删除</div>

			<div :class="info.bq == '2' ? 'ft-2':'ft-3'" v-if = "info.bq == '2'">已完成</div>
			<div :class="info.bq == '2' ? 'ft-2':'ft-3'" v-if = "info.bq == '2'" @click="del">删除</div>
		</footer>


		<div class="wrap" v-if="msgBol">
			<div class="box">
				<h4>留言</h4>
				<img src="../../assets/img/close.png" class="close" @click="msgBol = false"/>
				<div class="content">
					<textarea placeholder="请发表您的留言" v-model="intro"></textarea>
				</div>

				<mt-button type="primary" size="large" @click="submit">发表</mt-button>
			</div>
		</div>


		<mt-actionsheet :actions="actions" v-model="contacts" cancelText="取消"></mt-actionsheet>
	</article>
</template>

<script type="text/javascript">
import { MessageBox } from 'mint-ui'
	export default {
		data () {
			return {
				fdimg:false,
				contacts: false,
				// ftClass: 'ft-3',
				intro: '',
				msgBol: false,
				info: '',
				time: '',
				actions: [],
				imgBol: true,
				// imgUrl:info.tp,
				imgUrl:'',
			}

		},
		created () {
			// console.log(this.$route.params.id);
			this.getData();
		},
		methods: {

			getImg () {
				var self = this;
				var oFile = document.querySelector('.file');
				this.imgSrc =oFile.files[0];
				// console.log(lrz(this.imgSrc))
				// this.imgSrc =lrz(oFile[0]);
     			// console.log(lrz(this.imgSrc.size))
     			console.log(this.imgSrc)
     			console.log(123)

				if(!/image\/\w+/.test(this.imgSrc.type)){
		            MessageBox("请确保文件为图像类型");
		            return false;
		        }

		        if ((this.imgSrc.size/1024/1024).toFixed(0) >= 4) {
		            MessageBox("图片尺寸过大");
		            return false;
		        }

				this.imgBol = false;
				// lrz(this.imgSrc).then(function (rst) {
        //     // 处理成功会执行
        //     console.log(rst);
        //     // console.log(rst.base64);
				// 		self.imgUrl = rst.base64;
        // })

				var base64 = "";
						var reader = new FileReader();
						reader.readAsDataURL(this.imgSrc)
						reader.onload = function(e){
							base64 = this.result;
					self.imgUrl = base64;
						}
			},
			submit () {
				if (!this.intro) {
					MessageBox("请输入留言信息");
					return;
				}
				this.axios.get(this.$store.state.hostname + 'cw/savely.do',{
					yhid: this.ls.getItem('userID'),
					cwid: this.$route.params.id,
					lynr: this.intro
				}).then( res => {
					// console.log(res)
					MessageBox("留言成功");
					this.intro = "";
					this.msgBol = false
				})
			},
			contactsFn (tel, wxzh) {
				this.actions = [
					{
						name: "电话：" + tel,
						method: function(){
							window.location.href = "tel:" + tel
						}
					},
					{
						name: "微信：" + wxzh,
						method: function(){
							MessageBox("请长按复制微信号添加好友");
						}
					}
				]
				this.contacts = true;
			},
			getData () {
				// console.log(this.$route.params.id)
				this.axios.get(this.$store.state.hostname + 'cw/getcwinfo.do',{
					yhid: this.ls.getItem('userID'),
					cwid: this.$route.params.id
					// yhid:48,
					// cwid: 141,
				}).then( res => {
					// console.log(res.xxdz)
					// console.log(res)
					// console.log(22)
					this.info = res;
					// this.info.isdel = 'Y'
					this.time = this.getLocalTime(this.info.sj.time)
				})
			},
			baocun(){
				if(!this.imgUrl){
					this.imgUrl = this.info.tp
				}
				// alert(this.imgUrl)
				this.axios.post(this.$store.state.hostname + 'cw/updatecwinfo.do',{
							yhid: this.ls.getItem('userID'),
							cwid: this.$route.params.id,
							// yhid:36,
							// cwid: 141,
							// bq:this.info.bq,
							title:this.info.title,
							ms:this.info.ms,
							tp:this.imgUrl,
							pz: this.info.pz,
							tz: this.info.tz,
							type: this.info.type,
							addr: this.info.addr,
							xxdz:this.info.xxdz,
							xm:this.info.xm,
							sjh:this.info.sjh,
							email:this.info.email,
							xsje:this.info.xsje,
				}).then( res => {
						MessageBox('提示', '修改成功');
						// this.$router.go(-1);
						this.$router.back(-1);
						// console.log(res.xxdz)
						// this.info = res;
						// this.info.isdel = 'Y'
						// this.time = this.getLocalTime(this.info.sj.time)
				})
			},
			wancheng(){
				MessageBox({
					title: '提示',
					message: '您的寻找完成了吗？确定执行此操作吗？',
					showCancelButton: true
				}).then( res => {
					// console.log(res)
					if (res === 'confirm') {
						this.axios.get(this.$store.state.hostname + 'cw/updateCwzt.do',{
							yhid: this.ls.getItem('userID'),
							cwid: this.$route.params.id
						}).then( res => {
							// console.log(res)
							if (res != 'L' || res != 'N') {
								// this.$router.go(-1);
								this.$router.back(-1);
							}
						})
					}
				})

			},
			del () {
				MessageBox({
					title: '删除提示',
					message: '您不再发布寻找信息吗？确定执行此操作吗？',
					showCancelButton: true
				}).then( res => {
					// console.log(res)
					if (res === 'confirm') {
						this.axios.get(this.$store.state.hostname + 'cw/updatedelcw.do',{
							yhid: this.ls.getItem('userID'),
							cwid: this.$route.params.id
						}).then( res => {
							// console.log(res)
							if (res != 'L' || res != 'N') {
								// this.$router.go(-1);
								this.$router.back(-1);
							}
						})
					}
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	article {
		.fdimg{
			width: 100%;
			height: 100%;
			position:fixed;
			background:rgba(0,0,0,0.8);
			z-index: 100;
			img{
				position: absolute;
				top:10%;
				left: 5%;
				width: 90%;
			}
		}
		background: #F5F5F5;
		padding-bottom:0.5rem;
		.banner {
			width: 100%;
			height: 2.3rem;
			background: #AC9A82;
			overflow: scroll;
			position: relative;

			img {
				position: absolute;
				// height: 90%;
				width: 90%;
				top:5%;
				left:5%;
				// transform: translateX(-50%);
				display: block;
			}
		}
		.wrap {
			position: fixed;
			width: 100%;
			height: 100%;
			left:0;top:0;
			background: rgba(0,0,0,0.5);
			display:flex;
			align-items: center;
			justify-content:center;
			text-align: center;


			.box {
				width: 3rem;
				background: #fff;
				padding:0.1rem;
				position: relative;
				border-radius: 0.1rem;
				h4 {
					color: #555;
				}
				.close {
					position: absolute;
					right:0.1rem;top:0.1rem;
					width: 0.2rem;
				}
				.content {
					textarea {
						width: 100%;
						height: 0.7rem;
						margin-top:0.1rem;
						margin-bottom: 0.1rem;
						resize: none;
						font-size:0.12rem;
						text-indent: 1em;
						padding:0.05rem 0;
						border-radius: 0.03rem;
					}
				}

				// .box-intro {
				// 	>*{
				// 		vertical-align: middle;
				// 		display: inline-block;
				// 		text-align: right;
				// 	}
				// }
				// img {
				// 	width: 0.3rem;
				// }
				// span {
				// 	display: inline-block;
				// 	font-size: 0.12rem;
				// 	margin:0 0.05rem;
				// }
			}
		}
		.pet-intro {
			background: #fff;
			margin-top:0.15rem;
			padding: 0.2rem 0.1rem 0rem 0.2rem;
		    box-shadow:0px 0px 0.05rem #969696;
		    font-size:0.14rem;

		    .trait {
		    	padding:0.03rem 0 0.2rem 0;
		    	line-height: 0.18rem;
		    	position: relative;
		    	font-size: 0.12rem;

		    	&:after {
					content: '';
					position: absolute;
					width: 100%;
					top:100%;left:0;
					border-bottom:1px solid #ccc;
					transform: scale(1,0.5);
				}

				.fr {

					input {
						display: inline-block;
						width: 1rem !important;
					}
					img {
						width: 1rem;
						margin-right: 0.2rem;
					}
					.img1{
						position: relative;
						.file {
							opacity: 0;
							position: absolute;
							left:50%;
							transform: translateX(-50%);
							width: 1.3rem;
							height: 0.3rem;
						}
						.icon {
							width: 1.3rem;
							height: 0.3rem;
							font-size: 0.12rem;
							line-height: 0.3rem;
							border: 1px solid #eee;
							border-radius:0.05rem;
							text-align: center;
							margin: 0 auto;
							color:#777;
							span {
								// width: 0.8rem;
									// margin-left:0.1rem;
									// color:0.12rem;
									background-color: #fff;
							}
						}
					}
					// select{
					// 	width:1.05rem;
					// 		appearance:none;
					// 		-moz-appearance:none;
					// 		-webkit-appearance:none;
					// 		border: solid 1px red;
          //
					// }
				}
		    	.list {
						.but{
							border: 1px solid #ccc;
							border-radius: 0.1rem;
							width: 0.7rem;
							height: 0.3rem;
							margin-left: 0.7rem;
						}
		    		margin:0.08rem 0;
		    		span,input {
							// margin-top: 0.05rem;
							border: none;
							vertical-align: middle;
		    			display: inline-block;
		    			width: 1.3rem;
		    			// height: 0.25rem;
		    			line-height: 0.25rem;
		    			background: #F2F2F2;
		    			text-indent: 1em;
		    			position: relative;
		    			&:after {
							content: '';
							position: absolute;
							width: 200%;
							height: 200%;
			    			border-radius:0.08rem;
							top:0;left:0;
							// border:1px solid #ccc;
							transform-origin: 0 0;    //设置元素的基点为0 0
							transform: scale(0.5);
						}
		    		}
		    	}
		    }
		    .lose {
		    	font-size:0.12rem;
		    	margin:0.05rem 0 0.05rem 0;

		    	.list {
		    		margin:0.08rem 0;
		    		input, textarea {
							border: none;
							vertical-align: middle;
		    			display: inline-block;
		    			width: 1.3rem;
		    			// height: 0.25rem;
		    			line-height: 0.25rem;
		    			background: #F2F2F2;
		    			text-indent: 1em;
		    			position: relative;
							textarea {
			    			outline: none;
			    			text-indent: 0.5em;
			    			padding: 0.05rem 0.1rem;
			    		}
		    			&:after {
							content: '';
							position: absolute;
							width: 200%;
							height: 200%;
			    			border-radius:0.08rem;
							top:0;left:0;
							border:1px solid #ccc;
							transform-origin: 0 0;    //设置元素的基点为0 0
							transform: scale(0.5);
						}
		    		}
		    	}
		    }
		}

		.person-intro {
			background: #fff;
			margin-top:0.15rem;
			padding: 0.2rem 0.1rem 0rem 0.2rem;
		    box-shadow:0px 0px 0.05rem #969696;
		    font-size:0.14rem;

		    .trait {
		    	padding:0.03rem 0 0.2rem 0;
		    	line-height: 0.18rem;
		    	position: relative;
		    	font-size: 0.12rem;

		    	&:after {
					content: '';
					position: absolute;
					width: 100%;
					top:100%;left:0;
					border-bottom:1px solid #ccc;
					transform: scale(1,0.5);
				}
		    	.list {
		    		margin:0.08rem 0;
		    		input {
							border: none;
		    			display: inline-block;
		    			width: 2.5rem;
		    			height: 0.25rem;
		    			line-height: 0.25rem;
		    			background: #F2F2F2;
		    			text-indent: 1em;
		    			position: relative;

		    			&:after {
							content: '';
							position: absolute;
							width: 200%;
							height: 200%;
			    			border-radius:0.08rem;
							top:0;left:0;
							border:1px solid #ccc;
							transform-origin: 0 0;    //设置元素的基点为0 0
							transform: scale(0.5);
						}
		    		}
		    	}
		    }
		}

		footer {
			position: fixed;
			bottom:0;
			width: 100%;
			height: 0.5rem;

			div {
				float: left;
				height: 100%;
				line-height: 0.5rem;
				text-align: center;
				background: #8BC7D1;
				color: #fff;
				font-size: 0.2rem;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					width: 200%;
					height: 200%;
					top:0;left:0;
					border:1px solid #555;
					transform-origin: 0 0;    //设置元素的基点为0 0
					transform: scale(0.5);
				}
			}

			.ft-2 {
				width: e("calc(100% / 2)");
			}

			.ft-3 {
				width: e("calc(100% / 3)");
			}
		}
	}
</style>
